<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片换脸</title>
    <style>
      /* 按钮样式 */
      button, .regular-button {
        cursor: pointer; /* 鼠标悬停显示为手型 */
        font-family: "Microsoft YaHei";
        background-color: white; /* 白色背景 */
        border: 1px solid #888; /* 灰色边框 */
        color: black; /* 黑色字体 */
        padding: 5px 15px;
        margin: 10px;
        text-align: center; /* 文字居中 */
        border-radius: 15px; /* 圆角边框 */
        font-size: 14px; /* 确保字体一致 */
        display: inline-block; /* 保证 label 显示为块状元素 */
        line-height: normal; /* 确保高度一致 */
      }
      
      /* 禁用按钮样式 */
      button:disabled, .regular-button:disabled {
        background-color: #f0f0f0;
        border-color: #ccc;
        color: #aaa;
        cursor: not-allowed;
      }
      
      /* 悬停状态：浅灰背景，深灰边框 */
      button:hover, .regular-button:hover {
          background-color: #f0f0f0;
          border-color: #666666;
      }

      /* 点击状态：深灰背景，白色文字 */
      button:active, .regular-button:active {
          background-color: #666666;
          color: #ffffff;
          border-color: #444444;
      }
      
      /* 设置全局样式 */
      body {
        font-family: NSimSun, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        background-color: #fafafa;
      }
      
      /* 设置选项卡容器样式 */
      .tabs {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        /*margin-bottom: 20px;*/
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 0px;
      }
      
      /* 设置单个选项卡样式 */
      .tab {
        border-radius: 0px;
        border: 1px solid #ccc;
        padding: 5px 122px;
        cursor: pointer;
        color: #555;
        transition: background-color 0.3s, color 0.3s;
        background-color: #f9f9f9;
      }
      
      /* 设置激活状态选项卡样式 */
      .tab.active-tab {
        background-color: #007bff;
        color: #ffffff;
      }
      
      /* 设置内容区域样式 */
      .content {
        display: none;
        padding: 20px;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        /*border-radius: 8px;*/
        width: 640px;
        text-align: center;
        overflow-y: auto;
      }
      
      /* 设置激活状态的内容区域样式 */
      .content.active-content {
        display: block;
      }
      
      .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
      }
      
      .modal {
        background: #f2f2f2;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        text-align: center;
      }
      
      /* 隐藏原始的文件选择按钮 */
      #targetImageInput, #sourceImageInput {
        display: none;
      }
      /* 为图片预览和图片容器添加一些样式 */
      imagePreview {
        width: 320px;
        height: auto;
        margin-top: 20px;
      }
      
      #imageContainer {
        display: flex; /* 使用flex布局 */
        flex-direction: row; /* 并排排列 */
        justify-content: space-between; /* 两个容器之间留有空隙 */
        width: 100%; /* 确保宽度和父容器一样 */
      }
      
      .image-preview-container {
        width: 48%; /* 留一点间隙，所以不要50% */
        height: 320px; /* 保持你原来的高度 */
        border: 1px solid #ccc; /* 为了区分两个容器，可以加边框 */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        overflow: hidden; /* 防止图片溢出 */
      }
      
      .image-preview-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* 保持图片比例，完整显示在容器内 */
      }
      
      #videoContainer {
        width: 360px;
        height: 420px;
        margin: 0 auto;
        border: 2px solid #ccc;
        position: relative;
      }
      
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      
      input {
        font-family: "NSimSun";
      }
      
      /* 添加以下新规则 */
      .image-group {
        display: flex;
        flex-direction: column;
        margin: 0 90px; /* 增加左右间距 */
      }
      
      .upload-container {
        display: flex;
        justify-content: center;
        margin-bottom: 20px; /* 底部增加间距 */
      }
    </style>
  </head>
  <body>
    <!--    <h1 style="text-align:center;">图片换脸</h1>-->
    <div class="tabs">
      <div class="tab active-tab" data-target="tab1">提交人脸图片</div>
      <div class="tab" data-target="tab2">查看换脸图片</div>
    </div>
    <div class="content active-content" id="tab1">
      <div id="videoTab" style="display: block; text-align: center;">
        <p style="display: inline;">原始图片为目标图片(target image)，人脸图片为源图片(source image)即人脸数据来源</p>
        <div class="upload-container">
          <div class="image-group">
            <button type="button" class="regular-button" onclick="document.getElementById('targetImageInput').click()">选择原始图片</button>
            <input type="file" id="targetImageInput" name="file" accept="image/*" onchange="previewTargetImage(event)" required>
          </div>
          
          <div class="image-group">
            <button type="button" class="regular-button" onclick="document.getElementById('sourceImageInput').click()">选择人脸图片</button>
            <input type="file" id="sourceImageInput" name="sourceImageFile" accept="image/*" onchange="previewSourceImage(event)" required>
          </div>
        </div>
        <div id="imageContainer">
          <div class="image-preview-container">
            <img id="targetImagePreview" src="" alt="目标图片预览">
          </div>
          <div class="image-preview-container">
            <img id="sourceImagePreview" src="" alt="模板图片预览">
          </div>
        </div>
        <br>
        <button type="button" class="regular-button" onclick="uploadFileBtnOnclick()" style="display: none;">上传</button>
        <br>
        <button type="button" class="regular-button" onclick="sendImageCreateVideo()" style="display: none;">生成图片</button>
        <input type="text" id="verificationCodeInput" style="width: 120px; height: 30px;" placeholder="在这里输入验证码...">
        <br>
        <button type="button" class="regular-button" onclick="uploadAndCreateVideo()">上传图片</button>
      </div>
    </div>
    <div class="content" id="tab2">
      <div id="resultTab" style="text-align: center;">
        <label for="promptInput">工作流id:</label>
        <input type="text" id="promptInput" name="promptInput" style="width: 400px; height: 30px;" placeholder="在这里输入你的工作流id...">
        <br>
        <button type="button" class="regular-button" onclick="viewImg()">查看换脸图片</button>
        <div id="videoContainer"></div>
        <button type="button" id="downloadBtn" class="regular-button" onclick="downloadImg()">下载图片</button>
      </div>
    </div>
    <div id="customModal" class="modal-overlay">
      <div class="modal">
        <p>工作流已经提交，工作流ID为: <span id="promptId"></span></p>
        <p>若你需要关闭当前页面，请保存好你的工作流ID，图片生成完后凭此ID查看换脸图片。请选择操作：</p>
        <button class="yes-btn regular-button" onclick="handleYes()">复制ID到剪贴板</button>
        <button class="no-btn regular-button" onclick="handleNo()">一键填写ID到当前页面</button>
      </div>
    </div>
    <script src="js/config.js"></script>
    <script src="js/imageFaceSwap.js"></script>
  </body>
</html>
